import React, { Component } from 'react'
import moment from 'moment'
import QRCode from 'qrcode.react'
import { Link } from 'react-router-dom';
require('./index.css')

export default class Order extends Component {

  constructor(props) {
    super(props)
    this.state = {
      detailList: []
    }
  }

  componentDidMount() {
    document.title = '订单详情'
    let array = this.props.match.params.id.split("|")
    this.setState({ detailList: array })
  }

  render() {
    let detailList = this.state.detailList
    return (
      <div style={{ marginBottom: 20, padding: 10 }}>
        <div style={{ height: 30 }}>
          {/* <h3 style={{ margin: '20px 0',float:'left' }}>景区二次消费项目</h3> */}
          <Link to={`../order`} style={{ margin: '10px 0 0', float: 'right' }}>我的订单</Link>
          <Link to={`../../SellTicket`} style={{ margin: '10px 20px 0', float: 'right' }}>预订</Link>
        </div>
        <div className='detail-container'>
          <div className='detail-product' style={{ textAlign: 'left' }}>{detailList[0]}</div>
          <div>
            <span className='detail-tips'>数量：</span>
            <span>{detailList[1]}</span>
          </div>

          <div>
            <span className='detail-tips'>总价：</span>
            <span>¥ {detailList[2]}</span>
          </div>

          <div>
            <span className='detail-tips'>下单时间：</span>
            <span>{moment(new Date(detailList[5])).format('YYYY-MM-DD hh:mm:ss')}</span>
          </div>

          <div>
            <span className='detail-tips'>支付方式：</span>
            <span>{detailList[6]}</span>
          </div>

          <div>
            <span className='detail-tips'>状态：</span>
            <span>{detailList[4]}</span>
          </div>
        </div>

        <div className='detail-qrcode-container'>
          <div className='detail-qrcode-code'>二维码：{detailList[3]} </div>
          <QRCode value={`${detailList[3]}`} size={200} />
          <div className='detail-qrcode-code'>(出示二维码即可消费)</div>
        </div>
      </div>
    )
  }
}
